<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/a.js" type="text/bable"></script>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!-- <div class="root">
    它也有3种属性：border-box, padding-box,
    content--box。但要注意，它描述的是“背景图片”。也就是说，它只能对背景做样式上的操作。一旦规定了图片开始绘制的区域，就当于规定图片的左上角从什么地方开始，其他的它就不负责了。
  </div> -->

  <div class="bac border">
    <b>border</b>
    西风吹老洞庭波，一夜湘君白发多。
    醉后不知天在水，满船清梦压星河。
  </div>
  <div class="bac content-clip">
    <b>content</b>
    西风吹老洞庭波，一夜湘君白发多。
    醉后不知天在水，满船清梦压星河。
  </div>
  <div class="bac padding-clip">
    <b>padding</b>
    西风吹老洞庭波，一夜湘君白发多。
    醉后不知天在水，满船清梦压星河。
  </div>
  <br />

  <br />
  <div class="bac border-origin">
    <b>border</b>
    西风吹老洞庭波，一夜湘君白发多。
    醉后不知天在水，满船清梦压星河。
  </div>
  <div class="bac content-origin">
    <b>content</b>
    西风吹老洞庭波，一夜湘君白发多。
    醉后不知天在水，满船清梦压星河。
  </div>
  <div class="bac padding-origin">
    <b>padding</b>
    西风吹老洞庭波，一夜湘君白发多。
    醉后不知天在水，满船清梦压星河。
  </div>

  <div class="reflect">
    reflect
  </div>
  <div class="gradient"></div>

  <div class="mask">dd</div>
</body>

</html>